// 封装懒加载插件

// 引入懒加载插件-监听图片是否进入视口
import { useIntersectionObserver } from '@vueuse/core'
export const lazyPlugin = {
  install(app) {

    // 定义全局指令（图片懒加载应用）
    app.directive("img-lazy", {

      mounted(el, binding) {

        // el: 指令绑定的那个元素 img
        // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
        // console.log(el, binding.value);
        // 监听图片是否进入视口
        const {stop}=useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            if(isIntersecting) {
              // console.log(isIntersecting);
              // 图片进入视口，则加载图片
              el.src= binding.value 
              // 图片加载完成后停止监听
              stop()
            }
          }
        )
      }

  })
  }
}